<div id="draggable-modal-1" class="cmnBox draggable" draggable="true" data-type="button" style="display: none;"
    data-info="FORM Component">

    <!-- Button Modal -->
    <button type="button" class="btn btn-block btn-gray-800 mb-3" data-bs-toggle="modal"
        data-bs-target="#modal-default">Default</button>
    <!-- Modal Content -->
    <div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="h6 modal-title">Terms of Service</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>With less than a month to go before the European Union enacts new consumer privacy laws for its
                        citizens, companies around the world are updating their terms of service agreements to comply.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary">Accept</button>
                    <button type="button" class="btn btn-link text-gray-600 ms-auto"
                        data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- End of Modal Content -->

</div>